<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="60%"
      append-to-body
      custom-class="import-dialog"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="名称" prop="unsubscribeRuleName">
          <el-input
            v-model="form.unsubscribeRuleName"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="unsubscribeState">
          <el-select
            style="width: 240px"
            v-model="form.unsubscribeState"
            placeholder="请选择"
          >
            <el-option label="显示" value="0"></el-option>
            <el-option label="隐藏" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="unsubscribeRemark">
          <el-input
            type="textarea"
            v-model="form.unsubscribeRemark"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="规则" prop="unsubscribeType">
          <el-select
            style="width: 240px"
            v-model="form.unsubscribeType"
            placeholder="请选择"
          >
            <el-option label="严格模式" value="1"></el-option>
            <el-option label="酒店模式" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col style="margin-bottom: 60px"
          >退订规则：（扣费金额系统四舍五入精确到0.1元，保存后不能更改退订规则）
          </el-col
          >
        </el-row>
        <div v-if="form.unsubscribeType == '1'">
          <el-timeline>
            <el-steps :space="200" :active="3">
              <el-step title="预定成功" status="success">
                <template v-slot:description>
                  <span> 全额退款 </span>
                </template>
              </el-step>
              <el-step title="入住前1天12:00">
                <template v-slot:description>
                  <span> 扣除全部房费 </span>
                </template>
              </el-step>
              <el-step title="退房当天" status="error"></el-step>
            </el-steps>
          </el-timeline>
          <el-row>
            <el-col style="margin-bottom: 60px"
            >*预订成功后30分钟内：全额退款
            </el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px"
            >*入住前1天12:00前：全额退款
            </el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px"
            >*入住前1天12:00后：扣除全部房费
            </el-col
            >
          </el-row>
        </div>
        <div v-else>
          <el-timeline>
            <el-steps :space="200" :active="3">
              <el-step title="预定成功" status="success">
                <template v-slot:description>
                  <span> 全额退款 </span>
                </template>
              </el-step>
              <el-step title="入住当天00：00">
                <template v-slot:description>
                  <span> 按房费比例扣除 </span>
                </template>
              </el-step>
              <el-step title="入住当天12：00">
                <template v-slot:description>
                  <span> 按房费比例扣除 </span>
                </template>
              </el-step>
              <el-step title="入住当天18：00">
                <template v-slot:description>
                  <span> 当天不可取消，未入住日期按比例扣除 </span>
                </template>
              </el-step>
              <el-step title="退房当天" status="error"></el-step>
            </el-steps>
          </el-timeline>
          <el-row>
            <el-col style="margin-bottom: 60px"
            >*预订成功后30分钟内：全额退款
            </el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px"
            >*入住当天00:00前：全额退款
            </el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px; display: flex"
            ><span style="margin-top: 10px; margin-right: 10px"
            >*入住当天12:00前：按房费比例扣除 *扣除首晚房费</span
            >
              <el-form-item label="" label-width="0" prop="aday">
                <el-input
                  v-model="form.aday"
                  type="number"
                  style="width: 100px"
                ></el-input
                >
              </el-form-item>
              <span style="margin-top: 10px; margin-left: 10px">%</span></el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px; display: flex">
              <span style="margin-top: 10px; margin-right: 10px"
              >*入住当天18:00前：按房费比例扣除 *扣除首晚房费</span
              >
              <el-form-item label="" label-width="0" prop="bday">
                <el-input
                  v-model="form.bday"
                  type="number"
                  style="width: 100px"
                ></el-input>
              </el-form-item
              >
              <span style="margin-top: 10px; margin-left: 10px"
              >%</span
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col style="margin-bottom: 60px; display: flex"
            ><span style="margin-top: 10px; margin-right: 10px"
            >*入住当天18:00后或已入住：当天不可取消，未入住日期按比例扣除
                *扣除首晚房费</span
            >
              <el-form-item label="" label-width="0" prop="cday">
                <el-input
                  v-model="form.cday"
                  type="number"
                  style="width: 100px"
                ></el-input>
              </el-form-item
              >
              <span style="margin-top: 10px; margin-left: 10px"
              >%</span
              ></el-col
            >
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUnsubscribeRule,
  addUnsubscribeRule,
  updateUnsubscribeRule
} from '@/api/house/rule'

export default {
  props: {
    title: {
      default: '退订规则'
    },
    value: {
      default: false
    },
    unsubscribeRuleId: {
      default: undefined
    }
  },
  dicts: [],
  data() {
    var checkFee = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入'))
      }
      //小数点后两位
      if (value.toString().split('.')[1] && value.toString().split('.')[1].length > 2) {
        return callback(new Error('小数点后最多保留两位'))
      }
      if (value < 0 || value > 100) {
        callback(new Error('请输入0-100'))
      }
      callback()
    }
    return {
      unsubscribeRuleData: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomNumber: undefined,
        apartmentType: undefined,
        editStatus: undefined,
        apartmentState: undefined,
        updateBy: undefined
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      form: {
        unsubscribeRuleName: '', //退订规则名称
        unsubscribeType: '1', //退订类型（1严格模式，2酒店模式）
        unsubscribeState: '0', //退订状态（0显示，1隐藏）
        unsubscribeRemark: '', //退订备注
        unsubscribeContentMap: {
          1: '',
          2: '',
          3: ''
        },
        aday: null,
        bday: null,
        cday: null
      },
      rules: {
        unsubscribeRuleName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        unsubscribeState: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        aday: [{ required: true, validator: checkFee, trigger: 'blur' }],
        bday: [{ required: true, validator: checkFee, trigger: 'blur' }],
        cday: [{ required: true, validator: checkFee, trigger: 'blur' }]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
      if (this.unsubscribeRuleId) {
        this.getUnsubscribeRule()
      }
    },
    reset() {
      this.form = {
        unsubscribeRuleName: '', //退订规则名称
        unsubscribeType: '1', //退订类型（1严格模式，2酒店模式）
        unsubscribeState: '0', //退订状态（0显示，1隐藏）
        unsubscribeRemark: '', //退订备注
        unsubscribeContentMap: {
          1: '',
          2: '',
          3: ''
        },
        aday: null,
        bday: null,
        cday: null
      }
    },
    resetQuery() {
      // this.dateRange = [];
      this.resetForm('queryForm')
    },

    getUnsubscribeRule() {
      this.loading = true
      getUnsubscribeRule(this.unsubscribeRuleId).then((response) => {
        let form = response.data
        for (const key in this.form) {
          if (form[key]) {
            this.form[key] = form[key]
          }
        }
        if (form.unsubscribeType == 2) {
          this.form.aday = form.unsubscribeContentMap[1]
          this.form.bday = form.unsubscribeContentMap[2]
          this.form.cday = form.unsubscribeContentMap[3]
        }
        this.form.unsubscribeRuleId = form.unsubscribeRuleId
        this.loading = false
      })
    },
    handleSelectionChange() {
    },
    selectHosue(item) {
      this.$emit('success', item)
      this.close()
    },
    close() {
      this.resetQuery()
      this.visible = false
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.unsubscribeType == 1) {
            delete this.form.unsubscribeContentMap
          } else {
            this.form.unsubscribeContentMap[1] = this.form.aday
            this.form.unsubscribeContentMap[2] = this.form.bday
            this.form.unsubscribeContentMap[3] = this.form.cday
          }
          if (this.form.unsubscribeRuleId != undefined) {
            updateUnsubscribeRule(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.visible = false
            })
          } else {
            addUnsubscribeRule(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.visible = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog.scss";

.detail-item {
  margin-bottom: 20px;

  .label {
    color: #7f7f7f;
    margin-bottom: 10px;
  }

  .value {
    font-size: 16px;
  }
}

::v-deep .el-step__description {
  text-align: center;
}

::v-deep .el-step__title {
  position: absolute;
  top: -30px;
  left: -10%;
}
</style>
